<template>
  <div class="cart">
    <div class="cart-header">
      <img
        src="@/assets/images/left.png"
        alt=""
        @click="goBack"
        v-show="true"
      />
      <span>购物车</span>
      <span class="cart-edit" @click="multiEdit">{{
        isMultiEdit ? "完成" : "编辑"
      }}</span>
    </div>
    <div class="cart-main">
      <div class="cart-check-all">
        <van-checkbox
          :value="checkAll"
          checked-color="#b0352f"
          @click="changeChekAll"
          >商品</van-checkbox
        >
      </div>
      <div class="cart-list" v-if="list.length">
        <ul>
          <li v-for="item in list" :key="item.cart_id">
            <div>
              <van-checkbox
                v-model="item.checked"
                checked-color="#b0352f"
              ></van-checkbox>
            </div>
            <img class="cart-list-img" :src="item.imgUrl" alt="" />
            <div class="cart-list-info">
              <div class="cart-list-name">{{ item.title }}</div>
              <div class="cart-item-price">￥{{ item.price }}</div>
            </div>
            <div class="cart-item-count">
              <img
                class="cart-item-del"
                src="@/assets/images/clear.png"
                alt=""
                @click="removeCartItem(item)"
              />
              <van-stepper v-model="item.qty" min="1" max="10" integer />
            </div>
          </li>
        </ul>
      </div>
      <div class="cart-list cart-none-list" v-else>
        <!-- <router-link to='/'>去首页</router-link> -->
        <div>
          暂无数据，请添加你喜欢的商品吧~ <span @click="goHome">去首页</span>
        </div>
      </div>
    </div>
    <div class="cart-footer" v-if="list.length">
      <div class="cart-total-left cart-check-all">
        <van-checkbox
          :value="checkAll"
          checked-color="#b0352f"
          @click="changeChekAll"
        ></van-checkbox>
      </div>
      <div class="cart-total-left cart-total">
        <div v-show="!isMultiEdit">
          <div>
            共有<span class="cart-total-amount"> {{ totalCount }} </span>件商品
          </div>
          <div>
            总计：<span class="cart-total-amount"
              >￥{{ totalAmount.toFixed(2) }} + 0 茶币</span
            >
          </div>
        </div>
      </div>
      <div
        class="cart-btn"
        :class="{ 'cart-btn-active': totalCount > 0 }"
        v-if="!isMultiEdit"
      >
        去结算
      </div>
      <div
        class="cart-btn"
        :class="{ 'cart-btn-active': totalCount > 0 }"
        v-else
        @click="multiRemove"
      >
        删除
      </div>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from "vuex";
import { Toast, MessageBox } from "mint-ui";

export default {
  name: "Cart",
  data() {
    return {
      isMultiEdit: false,
    };
  },
  components: {},
  computed: {
    ...mapState("cart", { list: "cartList" }),
    ...mapGetters("cart", ["totalAmount", "totalCount", "checkAll"]),
    // checkAll: {
    //   get() {
    //     return !this.list.some((item) => !item.checked);
    //   },
    //   // set(val) {
    //   //    this.updateCartList(!val);
    //   // },
    //   set() {},
    // },
  },
  created() {
    this.getData();
  },
  methods: {
    ...mapMutations("cart", ["cartList", "updateCartList"]),
    async getData() {
      let res = await this.$http.getCartList();
      if (res.code == 200) {
        res.data.forEach((item) => {
          item.checked = true;
        });
        this.cartList(res.data);
      }
    },
    goBack() {
      this.$router.back();
    },
    goHome() {
      this.$router.replace("/");
    },
    changeChekAll() {
      this.updateCartList(!this.checkAll);
    },
    multiEdit() {
      this.isMultiEdit = !this.isMultiEdit;
    },
    async multiRemove() {
      if (this.totalCount == 0) {
        Toast("您还没有选择宝贝哦~");
        return;
      }
      MessageBox.confirm("确认删除宝贝吗?").then((action) => {
        console.log(11);
      });
      let ids = this.list.reduce((pre, cur) => {
        pre.push(cur.cart_id);
        return pre;
      }, []);
      let res = await this.$http.removeCart(ids);
      console.log('resssss',res);
    },
    removeCartItem(obj) {
      MessageBox.confirm("确认删除宝贝吗?").then((action) => {
        console.log(11);
      });
      // let res = await this.$http.removeCartById({ cart_id: obj.cart_id });
      // if (res.code == 200) {
      //   Toast("移除成功");
      //   this.getData();
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.cart {
  padding-bottom: 1.6rem;
  display: flex;
  flex-direction: column;

  .cart-header {
    width: 100%;
    height: 1.1733rem;
    background-color: #b0352f;
    padding: 0 0.2667rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    img {
      width: 0.6667rem;
      // position: absolute;
      // left: 10px;
    }

    span {
      color: #fff;
      font-size: 0.4267rem;
      // align-self: center;
    }
    .cart-edit {
      font-size: 0.32rem;
    }
  }

  .cart-main {
    width: 100%;
    flex: 1;

    .cart-check-all {
      height: 0.8rem;
      font-size: 0.48rem;
      display: flex;
      align-items: center;
      padding: 0.2667rem 0.1333rem;
    }

    .cart-list {
      background-color: #fff;
      font-size: 0.3733rem;
      padding: 0 0.1333rem;

      ul > li {
        display: flex;
        align-items: center;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding: 0.2667rem 0;
      }

      .cart-list-img {
        width: 20%;
      }

      .cart-list-info {
        display: flex;
        flex-direction: column;
        flex: 1;

        .cart-list-name {
          padding: 0.2667rem 0;
        }

        .cart-item-price {
          color: #b0352f;
        }
      }

      .cart-item-del {
        width: 0.5333rem;
      }

      .cart-item-count {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 2.4533rem;

        .van-stepper {
          width: 2.4533rem;
        }
      }
    }

    .cart-none-list {
      span {
        display: inline-block;
        background-color: #b0352f;
        color: #fff;
        width: 1.6rem;
        height: 0.8rem;
        line-height: 0.8rem;
        text-align: center;
        border-radius: 0.1333rem;
      }
    }
  }

  .cart-footer {
    background-color: #fff;
    width: 100%;
    height: 1.3333rem;
    position: fixed;
    left: 0;
    bottom: 1.6rem;
    display: flex;

    .cart-check-all {
      display: flex;
      align-items: center;
      padding: 0 0.1333rem;
    }

    .cart-total {
      flex: 1;
      font-size: 0.3733rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 0.1333rem 0;
    }

    .cart-total-left {
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .cart-total-amount {
      color: #b0352f;
    }

    .cart-btn {
      width: 3.2rem;
      height: 1.3333rem;
      background-color: #cfd0d3;
      color: #fff;
      font-size: 0.48rem;
      text-align: center;
      line-height: 1.3333rem;
    }

    .cart-btn-active {
      background-color: #b0352f;
    }
  }
}
</style>